<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';

const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();

// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([
    {
      type: "datePicker",
      prop: ["createStartTime", "createEndTime"],
      startPlaceholder: "创建开始时间",
      endPlaceholder: "创建结束时间",
      label: "",
      model: [],
    },
    {
      type: "input",
      prop: "name",
      placeholder: "订单号",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "shopName",
      placeholder: "商品名称/编码",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "下单门店",
        label: '',
        prop: 'source1',
        data:[
            {
                label:"收入",
                value:1
            },
            {
                label:"卖出",
                value:2
            }
        ],
        model: "",
    },
])

const btnLefts = ref([
    {
        label: "导出",
        plain: false,
        show: true,
        img: new URL("@/assets/icon/btn-export.png", import.meta.url),
        style: "border-color:#0C268C;color:#0C268C",
        click: async () => {
        //
        },
    },
])
const btnRights = ref([
])

const tableConfig = ref([
    {
      prop: "label",
      label: "商品编号",
      width:200
    },
    {
      prop: "phone",
      label: "商品名称",
      type:"slot",
      slotName:'phone',
      width:310
    },
    {
      prop: "layer",
      label: "实付金额",
      width:200
    },

    {
      prop: "layer",
      label: "优惠金额",
      width:200
    },
    {
      prop: "layer",
      label: "订单号",
      width:200
    },
    {
      prop: "layer",
      label: "下单门店",
      width:400
    },
    {
      prop: "layer",
      label: "时间",

    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        
        totalPage.value = 100;
        tableData.value = [
            {
                "doctorNumberCode": "YS000299",
                "type": "审方",
                "name": "12313",
                "mobile": "18207123212",
                "idCard": "",
                "frontUrl": "https://static.91medicine.net/images/20230919/2930e77d-fba7-4a7e-bbc4-f6815eca5a6d.jpg",
                "headUrl": "https://static.91medicine.net/images/20230919/f6159f8e-c44a-43cc-ae5c-3ddfc659cd7a.jpg",
                "introduce": "3123",
                "institutions": "九为（浙江）网络科技有限公司",
                "certificateUrl": "https://static.91medicine.net/images/20230919/d5e597c3-1c76-4646-a843-03b0b8686a03.jpg",
                "certificateNo": "312312",
                "titleValue": "",
                "uuid": "8a69c4628aab7785018aac0eb31f0004",
                "state": 1,
                "sfdaDoctorType": "1",
                "storeLocationUuid": "",
                "source": "3"
            },
        ];
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const img1 = ref(new URL("@/assets/images/login-bg3.png",import.meta.url))
const goToDetail = (uuid)=>{
  router.push({name:"ProjectManagementDetail",query:{uuid:uuid}})
}
</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"
        >
            <template #phone="{ row }">
                <div class="project-info">

                    <div class="name-info">
                        <div class="p1">
                            项目名称
                        </div>
                        <div class="p2">
                            <span>15g*6袋</span>
                        </div>
                    </div>
                </div>
            </template>
        </SeachTable>
    </div>
</template>
<style lang="less" scoped>
.project-info{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .name-info{
        width:calc(100%);
        box-sizing: border-box;
        .p1{
            width: 100%;
            color: #222222;
            font-weight: bold;
            line-height: 14px;
            font-size: 14px;

        }
        .p2{
            width: 100%;
            margin-top:8px;
            color: #666666;
            line-height: 16px;
            font-size: 14px;
        }
    }
}
</style>